import {designPage, reactive} from "plain-design-composition";
import {$configuration, $notification, AutoTable, PlcInput, Segment, SegmentGroup} from "../../../../packages";
import {PlainObject} from "plain-utils/utils/event";
import {useTableOption} from "../../../module/useTableOption";
import {DemoRow} from "../../Demo/DemoRow";

export const demo1 = designPage(() => {

  const state = reactive({
    show: true,
  });

  const http = $configuration.use('http');
  const checkNewCode = async (row: PlainObject) => {
    const { code, name, id } = row;

    const filterCode = { id: 'check_code', field: 'code', value: code, operator: '=' };
    const filterName = { id: 'check_name', field: 'name', value: name, operator: '=' };
    const filterId = { id: 'check_id', field: 'id', value: [id], operator: '!=' };

    const { list } = await http.post<{ list: any[] }>('/address/list', {
      ...!id ? {
        filters: [filterCode, filterName],
        filterExpression: '(check_code or check_name)',
      } : {
        filters: [filterCode, filterName, filterId],
        filterExpression: '(check_code or check_name) and (check_id)',
      },
    });
    if (list.length > 0) {
      $notification.error('地址代码或者地址名称唯一性冲突！');
      return Promise.reject();
    }
  };

  const provinceOption = useTableOption({
    url: '/address',
    param: { queries: [{ field: 'deep', value: '0', operator: '=' }] },
    defaultNewRow: { deep: 0, },
    showRows: 5,
  });

  const cityOption = useTableOption({
    url: '/address',
    showRows: 5,
    defaultNewRow: { deep: 1, },
    parentOption: provinceOption,
    parentMap: { parentName: 'name', parentCode: 'code' },
  });

  const districtOption = useTableOption({
    url: '/address',
    showRows: 5,
    defaultNewRow: { deep: 2, },
    parentOption: cityOption,
    parentMap: { parentName: 'name', parentCode: 'code' },
  });

  provinceOption.hooks.onBeforeSaveRow.use(row => checkNewCode(row));
  cityOption.hooks.onBeforeSaveRow.use(row => checkNewCode(row));
  districtOption.hooks.onBeforeSaveRow.use(row => checkNewCode(row));

  return () => <>
    <DemoRow title="基本用法">
      <AutoTable option={provinceOption}>
        <PlcInput title="地址代码" field="code" required/>
        <PlcInput title="地址名称" field="name" required defaultSearch/>
        <PlcInput title="经度" field="longitude"/>
        <PlcInput title="纬度" field="latitude"/>
      </AutoTable>
      {state.show && <>
        <AutoTable option={cityOption}>
          <PlcInput title="地址代码" field="code" required/>
          <PlcInput title="地址名称" field="name" required defaultSearch/>
          <PlcInput title="经度" field="longitude"/>
          <PlcInput title="纬度" field="latitude"/>
          {/*<PlcInput title="父级地址名称" field="parentName"/>*/}
          {/*<PlcInput title="父级地址代码" field="parentCode"/>*/}
        </AutoTable>
        <AutoTable option={districtOption}>
          <PlcInput title="地址代码" field="code" required/>
          <PlcInput title="地址名称" field="name" required defaultSearch/>
          <PlcInput title="经度" field="longitude"/>
          <PlcInput title="纬度" field="latitude"/>
          {/*<PlcInput title="父级地址名称" field="parentName"/>*/}
          {/*<PlcInput title="父级地址代码" field="parentCode"/>*/}
        </AutoTable>
      </>}
      <div>
        <span>子表控制：</span>
        <SegmentGroup v-model={state.show}>
          <Segment val={true} label="显示"/>
          <Segment val={false} label="隐藏"/>
        </SegmentGroup>
      </div>
    </DemoRow>
  </>;

});
